<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浙理素食协会</title>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fontawesome/css/all.min.css"> <!-- https://fontawesome.com/ -->
    <link rel="stylesheet" href="css/magnific-popup.css"> 
    <link rel="stylesheet" href="css/templatemo-ocean-vibes.css"> 


</head>
<body>
    <header class="tm-site-header">
        <h1 class="tm-mt-0 tm-mb-15"><span class="tm-color-primary">浙理素食协会</span></h1>
        <em class="tm-tagline tm-color-light-gray">简单，健康的饮食选择</em>
    </header>

    <!-- Video banner 400 px height -->
    <div id="tm-video-container">
        <video autoplay="autoplay" muted="" loop="loop" id="tm-video">
            <source src="video/ocean-sea-wave-video.mp4" type="video/mp4">
        </video>  
        <i id="tm-video-control-button" class="fas fa-pause"></i>
    </div>
    <div class="tm-container">
        <nav class="tm-main-nav">
            <ul id="inline-popups">
                <li class="tm-nav-item">
                    <a href="#intro" data-effect="mfp-move-from-top" class="tm-nav-link">
                        协会理念
                        <i class="fas fa-3x fa-water"></i>
                    </a>                
                </li>
                <li class="tm-nav-item">
                    <a href="#gallery" data-effect="mfp-move-from-top" class="tm-nav-link" id="tm-gallery-link">
                        协会画廊
                        <i class="far fa-3x fa-images"></i>
                    </a>
                </li>
                <li class="tm-nav-item">
                    <a href="#testimonials" data-effect="mfp-move-from-top" class="tm-nav-link">
                        协会推荐
                        <i class="far fa-3x fa-smile"></i>
                    </a>
                </li>
                <li class="tm-nav-item">
                    <a href="#about" data-effect="mfp-move-from-top" class="tm-nav-link">
                        关于协会
                        <i class="fas fa-3x fa-tint"></i>
                    </a>
                </li>
                <li class="tm-nav-item">
                    <a href="#contact" data-effect="mfp-move-from-top" class="tm-nav-link">
                        联系我们
                        <i class="far fa-3x fa-comments"></i>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Popup itself -->
        <div id="intro" class="popup mfp-with-anim mfp-hide tm-bg-gray">
            <a href="#" class="tm-close-popup">
                返回主页
                <i class="fas fa-times"></i>
            </a>
            <div class="tm-row tm-intro-row">
                <img src="img/intro.jpg" alt="Image" class="tm-intro-img">
                <div class="tm-col tm-bg-white tm-intro-pad">
                    <h2 class="tm-color-primary tm-page-title">我们的理念</h2>
                    <div class="tm-row tm-content-row">
                        <div class="tm-col-6 tm-intro-col-l">
                            <p>
                                  素食协会的宗旨是“心灵素食”，致力于将素食从单纯的饮食习惯拓展成为一种健康的生活态度，介绍和展示素食文化的理念与内涵，倡导把素食中包含的健康、环保、节约、快乐等元素运用到学习生活中去，最终达到身体与心灵的共同成长。
                            </p>
                            <p>
                                在活动中，学生素食协会除了介绍健康纯素的饮食习惯、提供科学合理的膳食指导，还与学校饮食中心合作，促进和改善校内素食环境，为同学们提供更加便利的素食条件，并通过分享交流活动提供打开心门、畅所欲言的环境，围绕素食或其他有助于心灵成长的话题开展讨论。
                            </p>
                        </div>
                        <div class="tm-col-6">
                            <p>
                                素食绝不仅仅是“不吃肉”这么简单，学生素食协会的目的也并非让每个人都选择单纯素食的饮食方式。重要的是通过素食这种方式，深刻反省人与自然的关系，选择积极、健康、和谐的生活态度，探索人类可持续发展的方向。
                            </p>

                            <div class="tm-text-center">
                                <a href="#" class="tm-btn tm-btn-primary mfp-prevent-close tm-btn-next">
                                    协会画廊
                                </a>
                            </div>                            
                        </div>
                    </div>
                </div>                
            </div> 
        </div>

        <div id="gallery" class="popup mfp-with-anim mfp-hide tm-bg-gray">
            <a href="#" class="tm-close-popup">
                返回主页
                <i class="fas fa-times"></i>
            </a>
            <div class="tm-row tm-gallery-row">
                <div class="tm-gallery">
                    <div class="tm-gallery-container">                        
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-01.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-01.jpg" alt="Image"/>
                            <figcaption>
                                <p>TemplateMo is the best website for free css templates.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-01.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-01.jpg" alt="Image"/>
                            <figcaption>
                                <p>TemplateMo is the best free css website templates.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-02.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-02.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-02.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-02.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-03.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-03.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-03.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-04.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-04.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-04.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-05.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-05.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-05.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-06.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-06.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-06.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-07.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-07.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-07.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item portrait">
                            <img src="img/gallery/portrait-08.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>                                                
                        
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-03.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-04.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-05.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-06.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-07.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item nature">
                            <img src="img/gallery/nature-08.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>                                                
                        
                        <figure class="effect-chico tm-gallery-item animal">
                            <img src="img/gallery/animal-08.jpg" alt="Image"/>
                            <figcaption>
                                <p>Chico's main fear was missing the morning bus.</p>							
                            </figcaption>			
                        </figure>
                        <figure class="effect-chico tm-gallery-item building">
                            <img src="img/gallery/building-08.jpg" alt="Image"/>
                            <figcaption>
                                <p>TemplateMo is the best free website for html css templates.</p>							
                            </figcaption>			
                        </figure>                
                    </div>
                </div>
                <!-- Gallery navigation and description -->
                <div class="tm-col tm-gallery-right">
                    <h2 class="tm-color-primary tm-mt-35 tm-page-title">协会画廊</h2>
                    <div class="tm-gallery-right-inner">
                        <ul class="tm-gallery-links">
                            <li>
                                <a href="#" class="active tm-gallery-link" data-filter="*">
                                    <i class="fas fa-layer-group tm-gallery-link-icon"></i>
                                    所有
                                </a>
                            </li>
                            <li>
                                <a href="#" class="tm-gallery-link" data-filter="portrait">
                                    <i class="fas fa-portrait tm-gallery-link-icon"></i>
                                    人物肖像
                                </a>
                            </li>
                            <li>
                                <a href="#" class="tm-gallery-link" data-filter="nature">
                                    <i class="fas fa-leaf tm-gallery-link-icon"></i>
                                    自然
                                </a>
                            </li>
                            <li>
                                <a href="#" class="tm-gallery-link" data-filter="animal">
                                    <i class="fas fa-paw tm-gallery-link-icon"></i>
                                    动物
                                </a>
                            </li>
                            <li>
                                <a href="#" class="tm-gallery-link" data-filter="building">
                                    <i class="far fa-building tm-gallery-link-icon"></i>
                                    建筑
                                </a>
                            </li>
                        </ul>
                        <p>
                            不同的照片元素往往能组成不同的效果，这就如同素食一样，
                            不同的素食材混合在一起，能提供更丰富的口味和各种所需的营养。
                        </p>
                        <p>
                            协会成员用各自独有的眼光拍下了这些独特的瞬间。
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="testimonials" class="popup mfp-with-anim mfp-hide tm-bg-gray">
            <a href="#" class="tm-close-popup">
                返回主页
                <i class="fas fa-times"></i>
            </a>
            <div class="tm-testimonials-inner">
                <h2 class="tm-color-gray tm-testimonial-col tm-page-title">协会推荐</h2>
                <div class="tm-row tm-testimonial-row">                
                    <div class="tm-col tm-testimonial-col">
                        <img src="img/3素食.png" alt="3素食">
                        <em class="tm-mb-30 tm-color-light-gray">
                            各种各样的素食能提供人体极大部分的营养
                        </em>
                        <p>
                            &nbsp&nbsp各种各样的素食是协会所推荐的，因为单一的素食营养也是单一的，
                            多种营养才能拥有好的身体。
                        </p>

                    </div>
                    <div class="tm-col tm-testimonial-col tm-testimonial-col-2">
                        <img src="img/testimonial-01.jpg" alt="Image" class="tm-mb-30">
                        <blockquote>
                            <p>
                                &nbsp&nbsp值得注意的是，好的心情对于健康身体的培养也是十分重要的。
                                而多参与社交对于大部分人显然能提供好的心情。
                                所以协会推荐你多参与社交。
                            </p>
                        </blockquote>
                        <blockquote class="tm-mb-50">
                            <p>
                                “大丈夫当世，当交四海英雄。”  &nbsp ——陈寿
                            </p>
                        </blockquote>  
                        <div class="tm-text-center">
                            <a href="#" class="tm-btn tm-btn-primary mfp-prevent-close tm-btn-contact">
                                Contact Us
                            </a>
                        </div>                 
                    </div>
                    <div class="tm-col tm-testimonial-col tm-testimonial-col-2">
                        <p>
                            &nbsp&nbsp运动有利于人体骨骼、肌肉的生长，增强心肺功能，改善血液循环系统、
                            呼吸系统和消化系统的机能状况，
                            有利于人体的生长发育，提高抗病免疫能力，增强有机体的适应能力。
                        </p>
                        <p>
                            &nbsp&nbsp所以协会推荐你多进行日常运动，你的每一次运动都是对生命的敬意。
                        </p>
                        <img src="img/testimonial-02.jpg" alt="Image" class="tm-mt-35">
                    </div>
                </div>
            </div>            
        </div>

        <div id="about" class="popup mfp-with-anim mfp-hide tm-bg-gray">
            <a href="#" class="tm-close-popup">
                返回主页
                <i class="fas fa-times"></i>
            </a>
            <h2 class="tm-color-primary tm-about-col tm-mb-40 tm-page-title">关于协会</h2>
            <div class="tm-row tm-about-row">
                <div class="tm-col tm-about-col tm-about-left">                    
                    <img src="img/about.jpg" alt="Image" class="tm-mb-30">
                    <p class="tm-mb-40">
                        &nbsp&nbsp浙理素协是浙理工最受好评的协会之一，协会历史悠久，最早可追溯到很多年前。
                    </p>
                    <p class="tm-mb-40">
                        &nbsp&nbsp浙理素协的每位会员都是很有独到见解的伙伴，会员间相处温馨，和睦。
                    </p>
                </div>
                <div class="tm-col tm-about-col">
                    <p class="tm-mb-40">
                        协会的每次活动总是能在校内产生广泛影响，多次掀起素食热潮。
                    </p>
                    <img src="img/素食.jpg" alt="素食">
                    <a href="#" class="tm-btn tm-btn-primary mfp-prevent-close tm-btn-contact tm-mb-40">
                        联系我们
                    </a>
                </div>               
            </div>
        </div>

        <div id="contact" class="popup mfp-with-anim mfp-hide tm-bg-gray">
            <a href="#" class="tm-close-popup">
                返回主页
                <i class="fas fa-times"></i>
            </a>
            <h2 class="tm-contact-col tm-color-primary tm-page-title tm-mb-40">联系我们</h2>
            <div class="tm-row tm-contact-row">
                <div class="tm-col tm-contact-col">
                

                    
                    <form id="contact-form" action="" method="POST" class="tm-contact-form">
                        <div class="form-group">
                            <label>
                                <input type="text" name="name" class="form-control rounded-0" placeholder="全名" required />
                            </label>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="email" name="email" class="form-control rounded-0" placeholder="E邮箱" required />
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="contact-select"></label><select class="form-control" id="contact-select" name="inquiry">
                                <option value="-">日常往来</option>
                                <option value="sales">交易往来</option>
                                <option value="creative">分享创意</option>
                                <option value="uiux">找社长唠嗑</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>
                                <textarea rows="8" name="message" class="form-control rounded-0" placeholder="信息" required=></textarea>
                            </label>
                        </div>

                        <div class="form-group tm-text-right">
                            <button type="submit" class="tm-btn tm-btn-primary">发送</button>
                        </div>
                    </form>
                </div>
                <div class="tm-col tm-contact-col tm-contact-col-r">
                    <!-- Map -->
                    <div class="mapouter tm-mb-40">
                        <div class="gmap_canvas">
                            <iframe width="100%" height="520" id="gmap_canvas"
                                src="https://maps.google.com/maps?q=Av.+L%C3%BAcio+Costa,+Rio+de+Janeiro+-+RJ,+Brazil&t=&z=13&ie=UTF8&iwloc=&output=embed"
                                frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                        </div>
                    </div>

                    <!-- Address -->
                    <address class="tm-mb-40">
                        浙理素协公众号,<br>
                        <strong>浙理元素</strong>
                    </address>

                    <!-- Links -->
                    <ul class="tm-contact-links">
                        <li>
                            <a href="tel:123456">
                                <i class="fas fa-phone tm-contact-link-icon"></i>
                                电话 ：没有
                            </a>
                        </li>
                        <li>
                            <a href="mailto:2898239515@qq.com">
                                <i class="fas fa-at tm-contact-link-icon"></i>
                                邮箱 ：2898239515@qq.com
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="fas fa-link tm-contact-link-icon"></i>
                                Athane_hhh123
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <footer class="tm-footer">
        <span>此网站仅为个人学习</span>
        <span>Web Designed by 
        <a href="https://templatemo.com" title="free website templates" target="_parent" rel="nofollow">TemplateMo</a></span>
</footer>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>    
    <script src="js/templatemo-script.js"></script>
</body>
</html>